<template>
  <div class="m-headline-list-item" @click="$router.push(`/headline/${headline.topId}?title=${encodeURIComponent(headline.title)}`)">
    <div class="item">
      <header v-if="isdate">{{headline.date}}</header>
      <section>
        <div class="img-box">
          <img v-lazy="headline.coverPath">
        </div>
        <p class="title">{{headline.title}}</p>
        <p class="subtitle">{{headline.subtitle}}</p>
        <div class="tool">
          <yd-icon name="good" size=".3rem" :color="headline.type == '1' ? '#f00385' : '#999'" @click.native.stop="onLike"></yd-icon> <span>{{headline.giveUp}}</span>
          <!-- #f00385 -->
        </div>
      </section>
    </div>
  </div>
</template>

<script>
  import { apiGiveUp } from 'js/api'

  export default {
    props: {
      headline: [Object],
      isdate: [Boolean]
    },
    methods: {
      onLike() {
        const token = this.$store.getters.token
        if (!token) {
          this.$toast('请先登录', () => {
            this.$router.push(`/login?redirect=${encodeURIComponent(this.$route.fullPath)}`)
          })
          return
        }
        apiGiveUp({
          accessToken: token,
          type: '2',
          docType: 'top',
          topId: this.headline.topId
        }).then(data => {
          if (this.headline.type == '1') {
            this.headline.type = '0'
            this.headline.giveUp--
          } else {
            this.headline.type = '1'
            this.headline.giveUp++
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_mixin.scss';
  .m-headline-list-item {
    color: #999;
    header {
      height: .5rem;
      line-height: .5rem;
      text-align: center;
      font-size: .2rem;
    }
    section {
      padding: .3rem;
      background: #fff;
    }
    .img-box {
      height: 3.36rem;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      font-size: .26rem;
      line-height: .66rem;
      color: #444;
    }
    .subtitle {
      @include cutoff();
      font-size: .24rem;
    }
    .tool {
      padding-top: .1rem;
      text-align: right;
    }
  }
</style>